<template>
	<view class="">
		<view class="reward" v-if="isShow" >
			<view class="top">
				<view class="title">
					{{title}}
				</view>
				<view class="cancel" @tap.stop="cancel">
					<image src="/static/images/icon/pay_cancel.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="surplus">
				鲸币余额:{{coinAmount}}
			</view>
			<view class="selections">
				<view class="select-item" :class="isActive == index ? 'addclass':''" v-for="(item,index) in list" :key="index" @tap="select(index)">
					{{item.money}}个
				</view> 
				<view class="select-item"  :class="isfocus? 'addclass':''">
					<input type="number" id="test" style="padding: 0 20rpx;" v-model="val" placeholder="自定义" @focus="focus" @blur="blur"/>
				</view>
			</view>
			<view class="words">
				<text>留言：</text>
				<input type="text" v-model="words" style="width: 380rpx;height: 80rpx;" placeholder="请输入" />
			</view>
			<view class="pay-tip">
				<view class="count" ></view>
				<view class="tip" v-if="isenoughpay">
					<text v-if="selectCount !== 0">￥{{selectCount / 100}} </text> 
					<text v-if="selectCount !== 0">,</text>
					<text>使用鲸币支付</text>
				</view>
				<view  class="unenoughtip" v-else> <text>鲸币不足，可充值支付</text> </view>
				
			</view>
			<view class="pay" @tap.stop="pay" v-if="isenoughpay">
				立即支付×{{selectCount}}鲸币
			</view>
			<view class="lack_pay" @tap.stop="pay" v-else>
				鲸币不足，充值并支付
			</view>
		</view>
		<view v-if="isShow" class="mask-f">
			<view class="mask"></view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			isShow:{//是否显示打赏组件
				type:Boolean,
				default:false
			},	
			// isenoughpay:{//当前鲸币是否足够支付
			// 	type:Boolean,
			// 	default:true
			// },
			list:{//金额项列表
				type:Array,
				default:[]
			},
			iscustomize:{//显示自定义输入框
				type:Boolean,
				default:true
			},
			coinAmount:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				title:'给作者送鲸果',
				isActive:0,						//选中项
				words:'',							//留言
				val:'',								//自定义金额
				isfocus:false,				//判断自定义金额输入框是否聚焦
				isenoughpay:true			//当前鲸币是否足够支付
			}
		},
		computed:{
			selectCount() {
				if(this.isActive == 99) {
					this.val * 100 > this.coinAmount ? this.isenoughpay = false :this.isenoughpay = true,
					console.log(this.isenoughpay);
					return this.val * 100
				}else {
					this.val = ''
					this.list[this.isActive].money * 100 > this.coinAmount ? this.isenoughpay = false :this.isenoughpay = true
					return this.list[this.isActive].money * 100
				}
			}
		},
		methods:{
			
			select(index) {//切换预选项
				this.isActive = index
			},
			
			cancel() {//关闭弹窗
				this.$emit('close')
			},
			
			focus() {//金额输入框焦点
				this.isfocus = true
				this.isActive = 99
			},	
			
			blur() {//金额输入框失去焦点
				this.isfocus = false
			},
			
			pay() {//支付操作
				if(this.isActive == 99) {//金额输入为自定义
					this.$emit('pay',this.val,this.words)
				}else {
					this.$emit('pay',this.list[this.isActive].money,this.words)
				}
			}
		}
	}
</script>

<style lang="scss">
.reward {
	position: fixed;
	height: 750rpx;
	width: 610rpx;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 99;
	border-radius: 8rpx;
	background-color: #FFFFFF;
}
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:  20rpx 40rpx 0;
}
.surplus {
	color: #3f3f3f;
	padding: 0 40rpx;
}
.title {
	color: #383838;
	font-size: 34rpx;
	line-height: 80rpx;
}
.cancel {
	image {
		width: 35rpx;
		height: 35rpx;
	}
}
.selections {
	display: flex;
	flex-wrap: wrap;
	width: 530rpx;
	padding: 40rpx;
	height: 220rpx;
	justify-content: space-between;
}
.select-item {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36rpx;
	width: 164rpx;
	height: 88rpx;
	color: #3f3f3f;
	border: 1rpx solid #e9e9e9;
}
.active {
	border: 1rpx solid #068fff;
}
.words {
	display: flex;
	padding-left:40rpx;
	align-items: center;
	input {
		background: #f2f2f2;
		padding: 0 30rpx;
		border-radius: 10rpx;
	}
}
.pay,.lack_pay {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #FFFFFF;
	border-radius: 10rpx;
	margin:40rpx;
}
.pay {
	background-color: #068fff;
}
.lack_pay {
	background-color: #ff6e6e;
}

.pay-tip {
	display: flex;
	height: 44rpx;
	padding: 30rpx 0;
	justify-content: center;
	letter-spacing: 3rpx;
	.count {
		font-size: 36rpx;
		line-height: 44rpx;
		color: #068fff;
	}
	.tip {
		color: #068fff;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 34rpx;
		text:nth-last-child(2) {
			color: #3f3f3f;
			font-size: 32rpx;
		}
		text:nth-last-child(1) {
			color: #3f3f3f;
			font-size: 32rpx;
		}
	}
	.unenoughtip {
		color: #ff6e6e;
		height: 44rpx;
		line-height: 44rpx;
		text {
			color: #ff6e6e;
		}
	}
}
.addclass {
	border: 1rpx solid #068fff;
	color: #068fff;
}
.mask-f {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	.mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.05);
	}
}
</style>
